<html lang="zh-cn" xmlns：th="http://www.thymeleaf.org" xmlns:th="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>订单信息</title>
    <link rel="stylesheet" type="text/css" th:href="@{/html/css/sweet-alert/sweet-alert.css}">
    <link th:href="@{https://fonts.googleapis.com/css?family=Work+Sans:300,400,700}" rel="stylesheet">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" th:href="@{/html/css/bootstrap/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/html/css/bootstrap/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/html/css/animate.css}">
    <link rel="stylesheet" th:href="@{/html/css/owl.carousel.min.css}">
    <link rel="stylesheet" th:href="@{/html/fonts/ionicons/css/ionicons.min.css}">
    <link rel="stylesheet" th:href="@{/html/fonts/flaticon/font/flaticon.css}">
    <link rel="stylesheet" th:href="@{/html/fonts/fontawesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/html/css/bootstrap-datepicker.css}">
    <link rel="stylesheet" th:href="@{/html/css/select2.css}">
    <link rel="stylesheet" th:href="@{/html/css/helpers.css}">
    <link rel="stylesheet" th:href="@{/html/css/style.css}">
    <link rel="stylesheet" th:href="@{/html/css/book.css}">

</head>


<body>
    <!-- 导航 nav -->
    <nav class="navbar navbar-expand-lg navbar-dark probootstrap_navbar" id="probootstrap-navbar">
        <div class="container">
            <a class="navbar-brand" style="font-size:42px; height: 100px;" href="/">富丽堂皇大宾馆</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#probootstrap-menu" aria-controls="probootstrap-menu" aria-expanded="false" aria-label="Toggle navigation">
    <span><i class="ion-navicon"></i></span>
  </button>
            <div class="collapse navbar-collapse" id="probootstrap-menu">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item" th:each="nav:${navList}"><a class="nav-link" style="font-size:20px;" th:href="${'../'+nav.url}" th:text="${nav.name}">
                    </a></li>
                    <li th:if="${#strings.isEmpty(session.loginName)}"class="nav-item"><a class="nav-link" style="font-size:20px;" th:href="@{/hotel/user/toLogin}">登录/注册</a></li>

                    <li th:if="${not #strings.isEmpty(session.loginName)}"class="nav-item"><a class="nav-link" style="font-size:20px;" th:href="@{/hotel/user/mine}" th:text="${session.loginName}"></a></li>
                    <li th:if="${not #strings.isEmpty(session.loginName)}"class="nav-item"><a class="nav-link" style="font-size:20px;" th:href="@{/hotel/logout}"  th:text="[退出]"></a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 导航 nav End -->
    <section class="probootstrap-cover overflow-hidden relative" th:style="'background-image: url('+@{/html/images/bg_1.jpg}+');'" data-stellar-background-ratio="0.5" id="section-home">
        <div class="overlay"></div>
        <div class="container" style=" padding-bottom: 10px;width: 1000px;">
            <div class="media probootstrap-media d-flex align-items-stretch mb-4 probootstrap-animate">
                <form action="">
                    <h4>预订信息</h4>
                    <div class="bookMsg">
                        <p>
                            <strong>房型信息</strong> <span th:value="${book.type}"></span>
                        </p>
                        <p>
                            <strong>入住日期</strong>
                            <!-- <input type="date" id="startDate" style="cursor: pointer;" /> -->
                            <span type="text" name="startdate" id="startDate"
                                   readonly="readonly"
                                   style="cursor: pointer; width: 120px; height: 30px; margin-left: 10px; color: #0b3e6f;"
                                  th:text="${#dates.format(book.startdate,'yyyy-MM-dd')}"></span>
                            <span style="font-size: 14px; color: #999;">中午&nbsp;12:00&nbsp;&nbsp;后</span>
                            <strong><span
                                    style="font-size: 30px; color: rgb(180, 180, 180);">—&nbsp;&nbsp;</span>退房日期</strong>
                            <!-- <input type="date" id="endDate" /> -->
                            <span type="text" name="enddate" id="endDate"
                                   readonly="readonly"
                                   style="cursor: pointer; width: 120px; height: 30px; margin-left: 10px; color: #0b3e6f;"
                                  th:text="${#dates.format(book.enddate,'yyyy-MM-dd')}"></span>
                            <span style="font-size: 14px; color: #999;">中午&nbsp;12:00&nbsp;&nbsp;前</span>
                        </p>

                        <p>
                            <strong>房费情况</strong> <span class="prices">￥</span> <span
                                class="price" th:text="${book.money}"></span>
                        </p>
                    </div>

                    <hr style="margin-left: 20px; width: 1050px;">
                    <h4>入住信息</h4>
                    <div class="bookMsg" style="height: 320px;">
                        <p id="customers">
                            <strong>住客</strong> <input name="customer" type="text"
                                                       readonly="readonly" id="customer" placeholder="填写住客信息"
                                                       th:value="${book.customer}" />
                        </p>

                        <p>
                            <strong>手机号</strong> <input type="text" name="tel" id="phone"
                                                        readonly="readonly" placeholder="手机号码" th:value="${book.tel}" />
                        </p>

                        <p>
                            <strong>身份证号</strong> <input type="text" name="idnumber" id="idnumber"
                                                        readonly="readonly" placeholder="身份证号" th:value="${book.idnumber}" />
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- END section -->

    <!-- 页脚 footer -->
    <footer>
        <div class="container">
            <div class="col-md-12 text-center">
                <p class="probootstrap_font-14" style="color: black;">闽ICP备xxxxxxxx号 联系电话：xxx-xxxxxxxx </p>
                <p class="probootstrap_font-14" style="color: black;">富丽堂皇大酒店 版权所有 COPYRIGHT &copy; 2020. The Grand Hotel All Rights Reserved </p>
            </div>

        </div>
    </footer>
    <!-- 页脚 footer end -->


    <script th:src="@{/html/js/jquery.waypoints.min.js}"></script>

    <script th:src="@{/html/My97DatePicker/WdatePicker.js}"></script>
    <script th:src="@{/html/js/book.js}"></script>
    <!--    <script type="text/javascript" th:src="@{http://demo.cssmoban.com/cssthemes4/sbtp_62_sweetalert/lib/sweet-alert.js}"></script>-->
    <script th:src="@{/html/js/sweet-alert/sweet-alert.js}"></script>
    <script th:src="@{/html/js/jquery.min.js}"></script>

    <script th:src="@{/html/js/popper.min.js}"></script>
    <script th:src="@{/html/js/bootstrap.min.js}"></script>
    <script th:src="@{/html/js/owl.carousel.min.js}"></script>

    <script th:src="@{/html/js/bootstrap-datepicker.js}"></script>
    <script th:src="@{/html/js/jquery.waypoints.min.js}"></script>
    <script th:src="@{/html/js/jquery.easing.1.3.js}"></script>

    <script th:src="@{/html/js/select2.min.js}"></script>

    <script th:src="@{/html/js/main.js}"></script>

    <script type="text/javascript">
        function logout() {
            window.location.href = "logout"
        }
    </script>
    <script type="text/javascript">
        var dateString1 = document.getElementById("startDate").value;
        var dateString2 = document.getElementById("endDate").value;
        var startDate = Date.parse(dateString1);
        var endDate = Date.parse(dateString2);
        var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
        var pr = parseFloat($(".price").text());
        $(".price").text(days * pr)
    </script>
</body>

</html>